<template>
  <div class="table">
    <div class="header">
      <span
        :style="{ width: item.width }"
        v-for="(item, index) in header"
        :key="index"
        :title="item.name"
      >
        {{ item.name }}
      </span>
    </div>
    <div v-for="(item01, index01) in list" :key="index01" class="divStyle">
      <span
        :style="{ width: item02.width }"
        v-for="(item02, index02) in header"
        :key="index02"
        :title="item01[item02.colName]"
      >
        {{ item01[item02.colName] }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Table",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    header: {
      type: Array,
      default: () => {
        return [
          {
            name: "列名1",
            width: "50%",
          },
          {
            name: "列名2",
            width: "50%",
          },
        ];
      },
    },
    list: {
      type: Array,
      default: () => {
        return [
          {
            rank: 1,
            name: "名称1",
          },
          {
            rank: 2,
            name: "名称2",
          },
        ];
      },
    },
  },
};
</script>
<style lang="less" scoped>
.table {
  background: linear-gradient(180deg, #061234 0%, #093964 100%);
  width: 100%;
  height: 100%;
  overflow: auto;
  .header {
    background: #0b1d44;
    color: #7cb4ff;
  }
  & > div {
    height: 42px;
    line-height: 42px;
    display: flex;
    color: #fff;
    span {
      height: 100%;
      text-align: center;
      font-size: 14px;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }
  }
}
.divStyle:nth-child(2n) {
  background: #0e3366;
}
</style>
